<template>
	<view class="custom-tab-bar">
		<view class="flex-row-center station-index-tab-box">
			<view @click="switchTab(index)" v-for="(item,index) in list" :key="index"
				class="flex-colume-center tabItem">
				<image :src="index == selected?item.selectedIconPath:item.iconPath "></image>
				<view class="title" :class="index==selected?'title-sel':''">{{item.text}}</view>
			</view>
			<view class="flex-row-center tabCenterBtn" @click="switchTab(2)">
				<view class="flex-colume-start tabCenterBtn1">
					<image mode="aspectFit" src="/static/tab/tab-center.png" style="width: 20px; height: 26px;"></image>
					<view style="margin-top: 10rpx; font-size: 10px; color: white; margin-bottom: 2px;">小和</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "custom-tab-bar",
		props: ['selected'],
		data() {
			return {
				list: [
					{
						"pagePath": "pages/tab/index",
						"text": "今天",
						"iconPath": "/static/tab/tab-index-nor.png",
						"selectedIconPath": "/static/tab/tab-index-sel.png"
					},
					{
						"pagePath": "pages/tab/tool",
						"text": "文具",
						"iconPath": "/static/tab/tab-tool-nor.png",
						"selectedIconPath": "/static/tab/tab-tool-sel.png"
					},
					{
						"pagePath": "pages/tab/center",
						"text": " ",
						"iconPath": "/static/tab/xiangzuo1.png",
						"selectedIconPath": "/static/tab/xiangzuo1.png"
					},
					{
						"pagePath": "pages/tab/square",
						"text": "广场",
						"iconPath": "/static/tab/tab-guangchang-nor.png",
						"selectedIconPath": "/static/tab/tab-guangchang-sel.png"
					},{
						"pagePath": "pages/tab/mine",
						"text": "我的",
						"iconPath": "/static/tab/tab-mine-nor.png",
						"selectedIconPath": "/static/tab/tab-mine-sel.png"
					}
				] 

			};
		},
		methods: {
			
			switchTab(index) {
				// 调用uni-app提供的API来切换tab  
				
				// if (index == 2 || index == 3){
				// 	var token = uni.getStorageSync('sw-mix-token')
				// 	console.log('token=',token)
				// 	if (token){
				// 		// this.requestInfo()
				// 		uni.switchTab({
				// 			url: '/' + this.list[index].pagePath
				// 		});
				// 	}else{
				// 		uni.navigateTo({
				// 			url:'/pages/login/login'
				// 		})
				// 	}
				// 	return
				// }
				uni.switchTab({
					url: '/' + this.list[index].pagePath
				});
				
			
			}
		},
		created(){
			console.log('tabbar create')
			// uni.hideTabBar()
			
		
			
			
			
		},

		

	}
</script>

<style lang="scss" scoped>
	
	.station-index-tab-box {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100vw;
		height: calc(env(safe-area-inset-bottom) + 49px);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		background: #C90000;
		// box-shadow: 0px -3px 34px 0px rgba(88,93,105,0.28);
	
		.tabItem {
			height: 49px;
			width: 19%;
			// background-color: red;
			padding-top: 2px;
			box-sizing: border-box;
			image {
				width: 24px;
				height: 24px;
			}
	
			.title {
				margin-top: 4px;
				font-size: 12px;
				color: rgba(255, 255, 255, 0.8);
			}
	
			.title-sel {
				color: white;
			}
		}
	}
	

</style>